<template>
  <view class="page-outer-wrapper">
    <view class="page-container">
      <view class="form-wrapper">
        <view class="h3">拍摄/上传你的半身照</view>
        <view class="file-wrapper" :class="{'file-uploaded': imgList[0]}">
          <image class="bg" :src="imgList[0] ||  default1" mode="scaleToFill" @tap="onPrview(0)"></image>
          <image class="icon-camera" src="../../../static/img/user/icon_camera.png" mode="widthFix" @tap="togglePopup('open', 0)"></image>
        </view>
      </view>
      <view class="h6">注：该信息用于审核验证，不会展示给第三方</view>
      <view class="page-footer">
        <button class="btn-save" type="primary" :disabled="!imgList[0]" @tap="putAuth('halfLength')">提交审核</button>
      </view>
    </view>
    <!-- 底部上传弹窗 -->
    <uni-popup ref="upload" type="bottom" :custom="true">
      <view class="uni-uploader">
        <view class="uni-uploader-btn" @tap="onTakeImg('halfLength')">拍摄照片</view>
        <view class="uni-uploader-btn" @tap="onChooseImg('halfLength')">上传照片</view>
        <view class="uni-uploader-btn" @tap="togglePopup('close')">取消</view>
      </view>
    </uni-popup>
    <!-- 预览 -->
    <uni-popup ref="preview" type="center" :custom="true">
      <image class="preview" :src="previewImg" mode="aspectFit"></image>
    </uni-popup>
    <!-- 消息 -->
    <uni-popup ref="message" type="center" :custom="true">
      <view class="message message-success">
        <image class="message-icon" src="../../../static/img/user/icon_success.png" mode="widthFix"></image>
        <text> 提交审核成功！</text>
      </view>
    </uni-popup>
  </view>
</template>

<script>
  import uploadMixin from './uploadMixin.js'
  import uniPopup from '@/components/uni-popup/uni-popup.vue'
  export default {
    mixins:[uploadMixin],
    components: {
      uniPopup
    },
    data() {
      return {
        default1: '../../../static/img/user/bg_bust.png'
      }
    }
  }
</script>

<style>
  @import url("../../../static/style/user.css");

  .page-container {
    display: flex;
    height: 100%;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
  }

  .h3 {
    text-align: center;
    color: #333;
    font-size: 30upx;
    margin-top: 40upx;
    margin-bottom: 40upx;
  }

  .h6 {
    text-align: center;
    font-size: 24upx;
    color: #999;
  }

  .file-wrapper {
    display: inline-block;
    text-align: center;
    position: relative;
  }

  .bg {
    width: 586upx;
    height: 690upx;
  }

  .preview {
    width: 700upx;
    height: 824upx;
  }

  .icon-camera {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 112upx;
  }

  .file-uploaded .icon-camera {
    right: 0;
    left: auto;
    top: auto;
    bottom: 0;
    transform: none;
  }

  .page-footer {
    width: 100%;
  }
</style>
